<!DOCTYPE html>
<html>
<head>
    <title>Direct API Test</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Direct API Connection Test</h1>
    <button onclick="testLogin()">Test Login API</button>
    <div id="result"></div>

    <script>
        async function testLogin() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = 'Testing...';
            
            try {
                console.log('Starting API test...');
                
                const response = await fetch('http://10.1.200.169:6724/api/Auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        "Username": "admin",
                        "Password": "Admin@666"
                    })
                });
                
                console.log('Response received:', response);
                console.log('Response status:', response.status);
                console.log('Response headers:', [...response.headers.entries()]);
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                console.log('Response data:', data);
                
                resultDiv.innerHTML = `
                    <h3>Success!</h3>
                    <p>Status: ${response.status}</p>
                    <p>Token: ${data.token ? data.token.substring(0, 20) + '...' : 'No token'}</p>
                    <p>Username: ${data.username || 'N/A'}</p>
                    <p>Role: ${data.role || 'N/A'}</p>
                `;
                
            } catch (error) {
                console.error('API test failed:', error);
                resultDiv.innerHTML = `
                    <h3>Failed!</h3>
                    <p>Error: ${error.message}</p>
                    <p>Check browser console for details</p>
                `;
            }
        }
    </script>
</body>
</html>